import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.text.KeyboardActions
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.input.key.Key
import androidx.compose.ui.input.key.KeyEventType
import androidx.compose.ui.input.key.key
import androidx.compose.ui.input.key.onKeyEvent
import androidx.compose.ui.input.key.type
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.text.input.ImeAction
import androidx.compose.ui.unit.dp
import androidx.lifecycle.viewmodel.compose.viewModel
import me.yiyou.meihua.element.CustomButton
import me.yiyou.meihua.ui.page.memory.MemoryViewModel

@Composable
fun FindBelongToPage() {
    val viewModel: MemoryViewModel = viewModel()
    val searchResult by viewModel.searchResult

    LaunchedEffect(Unit) {
        viewModel.loadGuaData()
    }

    Column(
        Modifier
            .fillMaxWidth()
            .padding(top = 60.dp),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(text = "输入卦象名")
        val focusManager = LocalFocusManager.current

        OutlinedTextField(
            value = viewModel.searchInput.value,
            onValueChange = { viewModel.onSearchInputChanged(it) },
            label = { Text("输入卦象名") },
            placeholder = { Text("输入卦象名") },
            // 回车搜索选项
            keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
            keyboardActions = KeyboardActions(
                onSearch = {
                    viewModel.findGuaGongByName()
                    focusManager.clearFocus() // 收起键盘
                }),
            modifier = Modifier
                .fillMaxWidth()
                .padding(8.dp))

        Text(text = "或者输入上下卦名称查找")

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {

            OutlinedTextField(
                value = viewModel.searchShang.value,
                onValueChange = { viewModel.onSearchShangInputChanged(it) },
                label = { Text("输入上卦象名") },
                placeholder = { Text("输入上卦象名") },
                // 回车搜索选项
                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
                keyboardActions = KeyboardActions(
                    onSearch = {
                        viewModel.findGuaGongByName()
                        focusManager.clearFocus() // 收起键盘
                    }),
                modifier = Modifier
                    .padding(8.dp)
                    .width(140.dp))

            OutlinedTextField(
                value = viewModel.searchXia.value,
                onValueChange = { viewModel.onSearchXiaInputChanged(it) },
                label = { Text("输入下卦象名") },
                placeholder = { Text("输入下卦象名") },
                // 回车搜索选项
                keyboardOptions = KeyboardOptions(imeAction = ImeAction.Search),
                keyboardActions = KeyboardActions(
                    onSearch = {
                        viewModel.findGuaGongByName()
                        focusManager.clearFocus() // 收起键盘
                    }),
                modifier = Modifier
                    .padding(8.dp)
                    .width(140.dp))
        }

        CustomButton(
            text = "寻找",
            onClick = { viewModel.findGuaGongByName() },
            modifier = Modifier
                .width(100.dp)
                .padding(10.dp)
        )

        LazyColumn {
            item { Text(text = "卦宫: ${searchResult}") }
        }
    }
}